<template>
    <div class="tree">
        <div class="item" :style="{ paddingLeft: level * 10 + 'px' }" v-for="item in list">
            <div class="row" @click="onToggle(item)">
                <div class="icon" :class="{selected: item.selected}" @click.stop="onSelected(item)"></div>
                <span class="tip">{{ item.label }}</span>
                <div class="oc" :class="{expand: item.expand}" v-if="item.children?.length"></div>
            </div>
            <Tree v-if="item.children?.length && item.expand" :level="level + 1" :list="item.children"
                @selected="onSelected" @toggle="onToggle"></Tree>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { IItem } from './type';

interface IProp {
    level: number,
    list: Array<IItem>
}

defineProps<IProp>();
const emit = defineEmits(["toggle", "selected"])
const onToggle = (item: any) => {
    console.log("item click", item)
    emit("toggle", item);
}

const onSelected = (item: any) => {
    console.log("item click", item)
    emit("selected", item);
}

</script>

<script lang="ts">
export default {
    name: "Tree"
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>